//根据id获取元素对象
function my$(id) {
	return document.getElementById(id);
}
//获取当前元素属性的值
function getStyle(element, attr) {
	//用三目运算符判断当前的浏览器是否支持这个函数，并返回相应的值
	return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr];
}
//动画函数
function animate(element, json, fn) {
	//清理上一个该元素的定时器，防止多点按造成速度过快，空间资源的浪费
	clearInterval(element.timeId);
	//开始计时器动画
	element.timeId = setInterval((function() {
		var flag = true; //默认所有的动画已经完成
		//开始循环出json中所有元素和目标值
		for(var att in json) {
			if(att == "opacity") {
				//获取这个元素当前的值,是一个数字类型*100
				var current = getStyle(element, att) * 100;
				//这个元素希望到达的目标值
				var target = json[att] * 100;
				//移动的步数，通过放慢速度的方法来表达
				var step = (target - current) / 10;
				//通过步数的正负数，决定取整的方向
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				//移动后的位置
				current += step;
				element.style[att] = current / 100;
			} else if(att == "zIndex") {
				//判断是否
				element.style[att] = json[att];
			} else {
				//获取这个元素当前的值,是一个数字类型
				var current = parseInt(getStyle(element, att));
				//这个元素希望到达的目标值 
				var target = json[att];
				//移动的步数，通过放慢速度的方法来表达
				var step = (target - current) / 10;
				//通过步数的正负数，决定取整的方向
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				//移动后的位置
				current += step;
				element.style[att] = current + "px";
			}
			//判断是否到达指定位置，没有到达便进去
			if(target != current) {
				flag = false;
			}
			//测试信息
			console.log("属性" + att + "的当前位置为" + getStyle(element, att))
		}
		//清理当前的定时器
		if(flag) {
			clearInterval(element.timeId);
			//判断是否存在该函数，前提时所有动画到达目标执行完毕，
			if(fn) { 
				fn();
			}
		}

	}), 20);

}